<template>
  <div class="container">
    <!-- 面包屑导航 -->
        <navbar></navbar>

    <!-- 面包屑导航 -->
    <div class="Box">
      <div class="table_tab">
        <div class="inquiry">
          <div class="headerbox">
            <div class="header">
              <div class="title_left"></div>
              短信发送记录
            </div>
            <div class="headerbox_right">
              <el-button style="height: 32px;line-height: 0px;" type="primary" @click="getBack" plain>返回</el-button>
            </div>
          </div>

        </div>
        <div class="inquiryTab">
          <div class="inquiryTab_header">
            <div class="tabTitle">列表数据</div>

          </div>
          <div class="table">
            <el-table
              :data="tableData.list"
              :header-cell-style="{ background: '#f8f8f8' }"
              style="width: 100%"
            >
              <el-table-column label="模板标题" prop="templateName">
                <template slot-scope="props">
                  <p style="cursor:pointer;" @click="handlerDetails(props.row)">{{ props.row.templateName }}</p>
                </template>
              </el-table-column>
              <el-table-column label="发送对象" prop="objectLabel"> </el-table-column>

              <el-table-column label="发送人" prop="createdByName">
              </el-table-column>
              <el-table-column label="模板签名" prop="signName">
              </el-table-column>
              <el-table-column label="发送方式" prop="typeLabel">
                <template slot-scope="props">
                    {{ props.row.typeLabel }}
                </template>
              </el-table-column>
              <el-table-column label="发送状态" prop="statusLabel">
                <template slot-scope="props">
                  <p :class="props.row.statusLabel == '发送成功' ? 'green' : 'red'">
                    {{ props.row.statusLabel }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column label="成功/失败" prop="status">
                <template slot-scope="props">
                    {{ props.row.successCount }}/{{ props.row.failCount }}
                </template>
              </el-table-column>
              <el-table-column
                label="发送时间"
                prop="createdTime"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页start -->
    <div class="page">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
     <el-dialog
      :title="dialog.title"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="dialog.visible"
      :width="dialog.width"
      :before-close="handleCloseAddClassify"
    >
      <template v-if="dialog.type == 'details'">
      <el-descriptions :column='1'>
          <el-descriptions-item label="模板标题">{{detailsData.templateName?detailsData.templateName:'-'}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column='4'>
          <el-descriptions-item label="发送对象">{{detailsData.objectLabel?detailsData.objectLabel:'-'}}</el-descriptions-item>
          <el-descriptions-item label="发送人">{{detailsData.createdByName?detailsData.createdByName:'-'}}</el-descriptions-item>
          <el-descriptions-item label="发送状态">{{detailsData.statusLabel?detailsData.statusLabel:'-'}}</el-descriptions-item>
          <el-descriptions-item label="成功/失败">{{detailsData.successCount?detailsData.successCount:'0'}}/{{detailsData.failCount?detailsData.failCount:'0'}}</el-descriptions-item>
          <el-descriptions-item label="模板签名">{{detailsData.signName?detailsData.signName:'-'}}</el-descriptions-item>
          <el-descriptions-item label="发送方式">{{detailsData.typeLabel?detailsData.typeLabel:'-'}}</el-descriptions-item>
          <el-descriptions-item label="发送时间">{{detailsData.createdTime?detailsData.createdTime:'-'}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column='1'>
          <el-descriptions-item label="短信内容">{{detailsData.content?detailsData.content:'-'}}</el-descriptions-item>

      </el-descriptions>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
export default {
  watch: {

  },
  components: {
    navbar
  },
  data () {
    return {
      dialog: { visible: false, title: '', type: '', width: '' },
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      detailsData: []
    }
  },
  mounted () {

  },
  created () {
    this.getDataList()
  },

  methods: {
    getBack () {
      this.$router.push({ name: 'ShortMessage' })
    },
    // 分页
    handleCurrentChange (val) {
      this.pageNo = val
      this.getDataList()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getDataList()
    },
    // 列表数据
    getDataList () {
      const data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$api.recordsPageList(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data
        } else {
          this.tableData = ''
        }
      })
    },
    // 短信详情
    handlerDetails (row) {
      console.log(row)
      this.dialog.type = 'details'
      this.dialog.visible = true
      this.dialog.title = '短信详情'
      this.dialog.width = '900px'
      this.templateGetDetails(row.id)
    },
    templateGetDetails (id) {
      const data = {
        id: id
      }
      this.$api.getRecordsDetails(data).then((res) => {
        if (res.code == 0) {
          this.detailsData = res.data
        } else {
          this.detailsData = ''
        }
      })
    },
    handleCloseAddClassify () {
      this.dialog.visible = false
    }

  }
}
</script>
<style scoped lang="scss">
.disFlex{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.disFlex_cen{
  display: inline-block;
  width: 60%;
}
.rowBox{
  display: inline-block;
}
Box {
  display: flex;
  justify-content: flex-start;
  width: 100%;

  .table_tab {
    width: 100%;
    margin-bottom: 50px;
  }
}
.table {
  border-radius: 5px;
  width: 100%;
}
/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

/deep/ .expanded {
  background: #f5f7fa;
  color: #000;
}

/deep/.el-table__expanded-cell[class*="cell"] {
  padding: 0px 50px;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
.header {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

.inquiry {
  background: #fff;
  padding: 10px 20px 10px 20px;
  border-radius: 5px;
  .el-form {
    margin-top: 10px;
  }
}
.inquiryTab {
  background: #fff;
  padding: 10px 20px 20px 20px;
  border-radius: 5px;
  .el-form {
    margin-top: 10px;
  }
  margin-top: 20px;
  .inquiryTab_header {
    display: flex;
    justify-content: space-between;
    /deep/ .el-button {
      height: 40px;
    }
  }
}

/deep/.el-table__expand-icon > .el-icon {
  color: transparent;
}

.table {
  margin-top: 10px;
  border: 1px solid #e8eaec;
  border-radius: 0;
  /deep/ .el-input--suffix .el-input__inner {
    background: #409eff;
    color: #fff;
    width: 104px;
    box-shadow: none;
  }
  /deep/ .el-button {
    padding: 10px 13px;
  }
}

.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 30px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 5;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }
  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 200px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  text-align: left;
}
/deep/.el-table__row:hover {
  color: rgb(45, 125, 223);
}
/deep/.el-dialog__header {
  padding: 20px 20px 20px 20px;
  border-bottom: 1px solid #d9d9d9;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 25px;
  color: #333333;
}
/deep/.el-dialog {
  border-radius: 10px;
}
/deep/.el-dialog__headerbtn {
  top: 15px;
}
.headerbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title_left {
  width: 4px;
  height: 16px;
  background: #4c81eb;
  opacity: 1;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.tabTitle {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 25px;
  color: #333333;
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 10px;
}
.headerTitle {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  opacity: 1;
  margin-top: 20px;
  margin-bottom: 15px;
}
/deep/.el-form-item__label {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.red {
  color: #ff0000;
}
.green {
  color: #67c23a;
}

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
/deep/ .el-dialog__footer {
  border-top: 1px solid #d9d9d9;
  margin-top: -20px;
  padding-top: 20px;
}
/deep/.el-table thead {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  opacity: 1;
}
.dialogbtn {
  width: 120px;
  height: 36px;
  border: 1px solid #d9d9d9;
  opacity: 1;
  border-radius: 4px;
  line-height: 0px;
}
.dialogbtntoo {
  width: 120px;
  height: 36px;
  background: #4168e7;
  opacity: 1;
  line-height: 0px;
  border-radius: 4px;
}

.arrange_time{
  width: 250px;
}
.headerbox_right{
}
</style>
